import React, { Component } from 'react';
import { View, StyleSheet } from 'react-native';
import Sitem from './Sitem';

export default class Service extends Component {
    render() {
        const serviceList = [
            [
                {name: '特惠套餐',icon: '../static/WechatIMG193.png'},
                {name: '匠人洗车',icon: '../static/WechatIMG193.png'},
                {name: '常规保养',icon: '../static/WechatIMG193.png'},
                {name: '清洁养护',icon: '../static/WechatIMG193.png'},
            ],
            [
                {name: '光亮养护',icon: '../static/WechatIMG193.png'},
                {name: '车身封体',icon: '../static/WechatIMG193.png'},
                {name: '修复还原',icon: '../static/WechatIMG193.png'},
                {name: '消费记录',icon: '../static/WechatIMG193.png'}
            ]
        ];

        return (
            <View style={styles.service}>
                {serviceList.map( (item,index) => {
                    return <View style={styles.row} key={index}>
                        {item.map( (_item) => {
                            return <Sitem {..._item} key={_item.name}/>
                        })}
                    </View>
                })}
            </View>
        );
    }
}

const styles = StyleSheet.create({
    service: {
        padding: 20,
        backgroundColor: '#fff'
    },
    row: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        backgroundColor: '#fefefe'
    }
})